<template>
  <div class="app-container">
    <el-row class="input" :gutter="10">
      <el-col :span="22"
        ><el-input v-model="traceId" placeholder="请输入溯源编号"></el-input
      ></el-col>
      <el-col :span="2"
        ><el-button type="primary" @click="query">查询</el-button></el-col
      >
    </el-row>
    <div v-if="retailerInfo" class="isShow">
      <el-row :gutter="10" class="row">
        <el-col :span="6" class="col">
          <el-row class="mb" style="height: 60%">
            <div class="trace">
              <i class="el-icon-success"></i>
              <el-card class="trace-card top">
                <div class="title">
                  {{ productInfo ? productInfo.product_name : "" }}
                </div>
                <el-tag>唯一溯源码：{{ traceId }}</el-tag>
                <el-row class="time">
                  <el-col :span="12" style="border-right: 1px solid #e6e3e3">
                    <el-descriptions direction="vertical" size="small">
                      <el-descriptions-item label="首次查询时间">{{
                        "202-2-13 15:00:00"
                      }}</el-descriptions-item>
                    </el-descriptions>
                  </el-col>
                  <el-col :span="12" style="text-align: end">
                    <el-descriptions direction="vertical" size="small">
                      <el-descriptions-item label="查询次数">{{
                        "第31次查询"
                      }}</el-descriptions-item>
                    </el-descriptions>
                  </el-col>
                </el-row>
              </el-card>
              <el-card class="trace-card bottom">
                <div class="bottom-img">
                  <el-image :src="productInfo ? productInfo.factory_image : ''">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
                <div class="bottom-info">
                  <h4>{{ productInfo ? productInfo.factory_name : "" }}</h4>
                  <p>
                    秉承其高质量与前沿科技，提供适合各类车型使用的多种规格顶级蓄电池产品
                  </p>
                </div>
              </el-card>
              <div class="circle circle-top"></div>
              <div class="circle circle-bottom"></div>
              <div class="line line-left"></div>
              <div class="line line-right"></div>
            </div>
          </el-row>
          <el-row style="height: calc(40% - 10px)" v-if="this.form.produceInfo">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>产品信息</span>
                <div class="logo-img">
                  <img src="@/assets/image/logo.png" />联盟链
                </div>
              </div>
              <div class="product-info">
                <div class="product-desc">
                  <li class="even">
                    型号：{{ productInfo ? productInfo.product_model : "" }}
                  </li>
                  <li class="odd">
                    系列：{{ productInfo ? productInfo.product_serial : "" }}
                  </li>
                  <li class="even">
                    尺寸：{{ productInfo ? productInfo.product_size : "" }}(mm)
                  </li>
                  <li class="odd">
                    容量：{{ productInfo ? productInfo.product_capacity : "" }}
                  </li>
                  <li class="even">
                    质保期：{{ productInfo ? productInfo.warranty_period : "" }}
                  </li>
                </div>
                <div class="product-img">
                  <el-image :src="productInfo ? productInfo.product_image : ''">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
              </div>
            </el-card>
          </el-row>
        </el-col>
        <el-col :span="6" class="col">
          <el-row class="mb" style="height: calc(30% - 10px)" v-if="this.form.productDetail">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>产品详情</span>
                <div class="logo-img">
                  <img src="@/assets/image/logo.png" />联盟链
                </div>
              </div>
              <div class="text item" style="height: 100%">
                <el-image
                  :src="productInfo ? productInfo.product_image : ''"
                  class="imgcls"
                >
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
            </el-card>
          </el-row>
          <el-row class="mb" style="height: 20%" v-if="this.form.supplierInfo">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>生产批次信息</span>
                <div class="logo-img">
                  <img src="@/assets/image/logo.png" />联盟链
                </div>
              </div>
              <div class="text item">
                <el-col :span="8">批次号</el-col>
                <el-col :span="16" class="right">{{
                  productInfo ? productInfo.product_batch : ""
                }}</el-col>
              </div>
              <div class="text item">
                <el-col :span="8">创建批次时间</el-col>
                <el-col :span="16" class="right">{{
                  productInfo ? productInfo.create_time : ""
                }}</el-col>
              </div>
            </el-card>
          </el-row>
          <el-row style="height: calc(50% - 10px)" v-if="this.form.materialInfo">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>主要原材料信息</span>
                <div class="logo-img">
                  <img src="@/assets/image/logo.png" />联盟链
                </div>
              </div>
              <div class="text item">
                <el-col :span="8">材料名称</el-col>
                <el-col :span="16" class="right">{{
                  materialInfo ? materialInfo.material_name : ""
                }}</el-col>
              </div>
              <div class="text item">
                <el-col :span="8">供应商</el-col>
                <el-col :span="16" class="right">{{
                  materialInfo ? materialInfo.supplier : ""
                }}</el-col>
              </div>
              <div class="text item">
                <el-col :span="8">供应批次</el-col>
                <el-col :span="16" class="right">{{
                  materialInfo ? materialInfo.supplier_batch : ""
                }}</el-col>
              </div>
              <div class="text item specity">
                <div>信息条码</div>
                <div class="imgDiv">
                  <el-image
                    :src="materialInfo ? materialInfo.barcode : ''"
                    class="imgcls"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
              </div>
            </el-card>
          </el-row>
        </el-col>
        <el-col :span="6" class="col">
          <el-row class="mb" style="height: 50%" v-if="this.form.produceInfo">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>生产信息</span>
                <div class="logo-img">
                  <img src="@/assets/image/logo.png" />联盟链
                </div>
              </div>
              <div class="text item">
                <el-col :span="8">生产加工时间</el-col>
                <el-col :span="16" class="right">{{
                  produceInfo ? produceInfo.create_time : ""
                }}</el-col>
              </div>
              <div class="text item">
                <el-col :span="8">生产员工</el-col>
                <el-col :span="16" class="right">{{
                  produceInfo ? produceInfo.operation_name : ""
                }}</el-col>
              </div>
              <div class="text item specity">
                <div>现场照片</div>
                <div class="imgDiv">
                  <el-image
                    :src="produceInfo ? produceInfo.operation_image : ''"
                    class="imgcls"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
              </div>
            </el-card>
          </el-row>
          <el-row style="height: calc(50% - 10px)" v-if="this.form.qualityInfo">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>质检信息</span>
                <div class="logo-img">
                  <img src="@/assets/image/logo.png" />联盟链
                </div>
              </div>
              <div class="text item">
                <el-col :span="8">质检结果</el-col>
                <el-col :span="16" class="right">{{
                  qualityInfo ? qualityInfo.quality_result : ""
                }}</el-col>
              </div>
              <div class="text item">
                <el-col :span="8">质检员</el-col>
                <el-col :span="16" class="right">{{
                  qualityInfo ? qualityInfo.operation_name : ""
                }}</el-col>
              </div>
              <div class="text item">
                <el-col :span="8">质检时间</el-col>
                <el-col :span="16" class="right">{{
                  qualityInfo ? qualityInfo.create_time : ""
                }}</el-col>
              </div>
              <div class="text item specity">
                <div>现场照片</div>
                <div class="imgDiv">
                  <el-image
                    :src="qualityInfo ? qualityInfo.operation_image : ''"
                    class="imgcls"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
              </div>
            </el-card>
          </el-row>
        </el-col>
        <el-col :span="6" class="col">
          <el-row class="mb" style="height: 50%" v-if="this.form.packageInfo">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>包装信息</span>
                <div class="logo-img">
                  <img src="@/assets/image/logo.png" />联盟链
                </div>
              </div>
              <div class="text item">
                <el-col :span="8">包装方式</el-col>
                <el-col :span="16" class="right">{{
                  packageInfo ? packageInfo.package_method : ""
                }}</el-col>
              </div>
              <div class="text item">
                <el-col :span="8">包装时间</el-col>
                <el-col :span="16" class="right">{{
                  packageInfo ? packageInfo.create_time : ""
                }}</el-col>
              </div>
              <div class="text item">
                <el-col :span="8">操作员工</el-col>
                <el-col :span="16" class="right">{{
                  packageInfo ? packageInfo.operation_name : ""
                }}</el-col>
              </div>
              <div class="text item specity">
                <div>现场照片</div>
                <div class="imgDiv">
                  <el-image
                    :src="packageInfo ? packageInfo.operation_image : ''"
                    class="imgcls"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
              </div>
            </el-card>
          </el-row>
          <el-row class="mb" style="height: calc(32% - 10px)" v-if="this.form.retailerInfo">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>零售商信息</span>
                <div class="logo-img">
                  <img src="@/assets/image/logo.png" />联盟链
                </div>
              </div>
              <div class="text item">
                <el-col :span="8">产品ID：</el-col>
                <el-col :span="16" class="right">{{
                  retailerInfo ? retailerInfo.product_id : ""
                }}</el-col>
              </div>
              <div class="text item">
                <el-col :span="8">零售点</el-col>
                <el-col :span="16" class="right">{{
                  retailerInfo ? retailerInfo.retailer : ""
                }}</el-col>
              </div>
              <div class="text item">
                <el-col :span="8">负责人</el-col>
                <el-col :span="16" class="right">{{
                  retailerInfo ? retailerInfo.retailer_name : ""
                }}</el-col>
              </div>
              <div class="text item">
                <el-col :span="8">负责人电话</el-col>
                <el-col :span="16" class="right">{{
                  retailerInfo ? retailerInfo.retailer_tel : ""
                }}</el-col>
              </div>
            </el-card>
          </el-row>
          <el-row class="mb" style="height: calc(18% - 10px)">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>区块链信息</span>
                <div class="logo-img">
                  <img src="@/assets/image/logo.png" />联盟链
                </div>
              </div>
              <div class="block-info">
                <i class="el-icon-success"></i>
                <span>本产品溯源码已在联盟链上存证</span>
              </div>
            </el-card>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div v-else-if="!retailerInfo">
      <el-empty description="暂无结果，请输入溯源码查询"></el-empty>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { getSettings } from "../../api/trace/settings";
export default {
  // components: { BlockInfo },
  data() {
    return {
      traceId: "",
      retailerInfo: null,
      productInfo: null,
      materialInfo: null,
      packageInfo: null,
      qualityInfo: null,
      produceInfo: null,
      distributorInfo: null,
      form: {},
    };
  },
  created() {
    getSettings().then((res) => {
      this.form = res.data;
    });
  },
  methods: {
    async query() {
      await this.getRetailerInfo();
      await this.getProductInfo();
      await this.getPackageInfo();
      await this.getProduceInfo();
      await this.getQualityInfo();
      this.getMaterialInfo();
    },
    /** 查询产品信息 */
    async getRetailerInfo() {
      try {
        let res = await this.$httpBlock.get(
          this.$httpUrl + "/retailerapi/queryRetailerById?id=" + this.traceId
        );
        this.retailerInfo = res.data; //零售
        console.log(this.retailerInfo, " this.retailerInfo ");
      } catch (e) {
        this.msgError("查询异常 " + e);
        console.error("调用失败 " + JSON.stringify(e));
      }
    },
    async getProductInfo() {
      try {
        let res = await this.$httpBlock.get(
          this.$httpUrl +
            "/productapi/queryProductInfoByCropsId?id=" +
            this.retailerInfo.material_id
        );
        this.productInfo = res.data[0].Record; //产品信息
        console.log(this.productInfo, " this.productInfo ");
      } catch (e) {
        this.msgError("查询异常 " + e);
        console.error("调用失败 " + JSON.stringify(e));
      }
    },

    async getPackageInfo() {
      try {
        let res = await this.$httpBlock.get(
          this.$httpUrl +
            "/productapi/queryOperationByCropsId?id=" +
            this.retailerInfo.material_id
        );
        let packageInfo = res.data.filter((item) => {
          return item.Record.operation_type == "Package";
        });
        this.packageInfo = packageInfo[0].Record; //包装信息
        console.log(this.packageInfo, " this.packageInfo ");
      } catch (e) {
        this.msgError("查询异常 " + e);
        console.error("调用失败 " + JSON.stringify(e));
      }
    },
    async getProduceInfo() {
      try {
        let res = await this.$httpBlock.get(
          this.$httpUrl +
            "/productapi/queryOperationByCropsId?id=" +
            this.retailerInfo.material_id
        );
        let produceInfo = res.data.filter((item) => {
          return item.Record.operation_type == "Produce";
        });
        this.produceInfo = produceInfo[0].Record; //包装信息
      } catch (e) {
        this.msgError("查询异常 " + e);
        console.error("调用失败 " + JSON.stringify(e));
      }
    },
    async getQualityInfo() {
      try {
        let res = await this.$httpBlock.get(
          this.$httpUrl +
            "/productapi/queryOperationByCropsId?id=" +
            this.retailerInfo.material_id
        );
        let qualityInfo = res.data.filter((item) => {
          return item.Record.operation_type == "Quality";
        });
        console.log(qualityInfo, " qualityInfo ");
        this.qualityInfo = qualityInfo[0].Record; //包装信息
      } catch (e) {
        this.msgError("查询异常 " + e);
        console.error("调用失败 " + JSON.stringify(e));
      }
    },
    /**查询原材料信息 */
    getMaterialInfo() {
      this.$httpBlock
        .get(
          this.$httpUrl +
            "/farmerapi/queryCropsById?id=" +
            this.productInfo.material_id
        )
        .then((res) => {
          this.materialInfo = res.data;
          console.log(this.materialInfo, "this.materialInfo");
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 84px);
  padding: 10px;
  min-height: 768px;
  background-color: #f4f4f4;
  .input {
    margin-bottom: 5px;
  }
  .isShow {
    height: 100%;
  }
  .row {
    height: calc(100% - 40px);
  }
  .col {
    height: 100%;
  }
  .mb {
    margin-bottom: 10px;
  }
}
::v-deep.box-card {
  height: 100%;
  .el-card__header {
    background: #e7f3ff;
  }
  .el-card__body {
    padding: 10px 20px 10px 20px;
    height: calc(100% - 53px);
  }
  .clearfix {
    span {
      line-height: 31px;
    }
  }
  .logo-img {
    float: right;
    padding: 3px 0;
    display: inline-flex;
    align-items: center;
    img {
      width: 25px;
      height: 25px;
    }
  }
  .item {
    min-height: 35px;
    border-bottom: 1px solid #e6e3e3;
    display: flex;
    align-items: center;
    justify-content: center;
    .right {
      text-align: right;
    }
    &:nth-last-child(1) {
      border-bottom: unset;
    }
    &.specity {
      display: block;
      margin-top: 8px;
      position: relative;
      height: 63%;
      .imgDiv {
        width: 100%;
        height: calc(100% - 31px);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        // width: 100%;
        // position: absolute;
        // top: 10px;
        // left: 0;
        // bottom: 10px;
        // right: 0;
        // img{
        //   display: block;
        //   width: 100%;
        //   height: 100%;
        //   max-width: 100%;
        // }
      }
    }
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  .product-info {
    background-color: #f7f5f5;
    width: 100%;
    height: 100%;
    padding: 20px 10px;
    font-size: 14px;
    display: flex;
    li {
      padding: 0 5px;
      height: 20%;
      display: flex;
      align-items: center;
    }
    .even {
      background: #e6e4e4;
    }
    .product-desc {
      width: 50%;
      height: 100%;
      margin-right: 10px;
    }
    .product-img {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .el-icon-success {
    color: #67c23a;
    font-size: 20px;
  }
  .block-info {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .imgcls {
    height: 100%;
  }
}
.trace {
  height: 100%;
  background: url("../../assets/image/bg.png") no-repeat;
  background-size: 100% 60%;
  position: relative;
  i {
    position: absolute;
    font-size: 45px;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    color: #67c23a;
  }
  .trace-card {
    position: absolute;
    width: 100%;
    height: 100%;
    &.top {
      height: 35%;
      top: 30%;
      background-color: rgb(214, 212, 212);
      text-align: center;
      background-image: radial-gradient(
        circle at 96.5% 92.5%,
        transparent 5px,
        rgb(255, 255, 255) 9px
      );
      .title {
        font-size: 18px;
        margin-bottom: 5px;
        margin-top: 5px;
        font-weight: 600;
      }
      ::v-deep.time {
        border-top: 1px solid #e2e1e1;
        margin-top: 10px;
        padding: 10px;
        .el-descriptions-item__cell {
          text-align: center;
          z-index: 10;
        }
      }
    }
    &.bottom {
      height: 33%;
      bottom: 0;
      background-color: rgb(214, 212, 212);
      background-image: radial-gradient(
        circle at 96.5% 10px,
        transparent 5px,
        rgb(255, 255, 255) 9px
      );
      ::v-deep.el-card__body {
        display: flex;
        height: 100%;
      }
      .bottom-img {
        width: 50%;
        height: calc(100% - 20px);
        img {
          width: 100%;
          height: auto;
        }
      }
      .bottom-info {
        width: 50%;
        p {
          font-size: 14px;
        }
      }
    }
  }
  .circle {
    width: 30px;
    height: 20px;
    background: red;
    position: absolute;
    border-radius: 4px;
    top: 60%;
    left: 2px;
    background-color: rgb(214, 212, 212);
    background-image: radial-gradient(
      circle at 15px 10px,
      transparent 5px,
      rgb(255, 255, 255) 9px
    );
    &.circle-bottom {
      top: 67.5%;
    }
  }
  .line {
    width: 4px;
    height: 5.5%;
    background: #cbd6f4;
    border-radius: 30%;
    position: absolute;
    top: 63%;
    &.line-left {
      left: 15px;
    }
    &.line-right {
      left: 95.8%;
    }
  }
}
@media (max-height: 768px) {
  .app-container {
    font-size: 14px !important;
    .title {
      font-size: 16px !important;
    }
    p {
      font-size: 12px !important;
    }
    .specity {
      height: 60% !important;
    }
  }
}
li {
  list-style-type: none;
}
</style>
